<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程信息</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/custom.form.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/video.js/7.10.2/video-js.min.css" rel="stylesheet"/>
    <style>
        body {
            background: #F6F8Fa;
            background-size: 100%;
        }

        .title {
            margin-top: 20px;
            margin-left: 30px;
            margin-right: 30px;
            background: #FFFFFF;
            border-radius: 8px;
            padding-bottom: 5px;
            box-shadow: 0 2px 17px 0 rgb(239 239 239 / 50%);
            font-size: 24px;
            color: #333;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: normal;
        }

        .title .info {
            display: flex;
            align-items: baseline;
        }

        .title .checkIn {
            margin-right: 20px;
        }

        .teacherName {
            margin-left: 5px;
            font-size: 15px;
        }

        .context {
            color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
            margin-left: 30px;
            margin-right: 30px;
            background: #FFFFFF;
            border-radius: 8px;
            box-shadow: 0 2px 17px 0 rgb(239 239 239 / 50%);
        }

        .context .chapterList {
            width: 350px;
            height: 600px;
            font-size: 22px;
            font-weight: 500;
            margin-top: 20px;
            padding-right: 10px;
            padding-left: 5px;
            padding-top: 15px;
            margin-right: 50px;
            margin-bottom: 20px;
            box-shadow: 0 0 0 1px rgb(0 0 0 / 5%), 0 2px 4px 1px rgb(0 0 0 / 9%);
            border-radius: 10px;
            background-color: #fff;
        }

        .context .player {
            width: 800px;
            height: 600px;
            margin-top: 10px;
            margin-right: 50px;
            margin-bottom: 20px;
            box-shadow: 0 2px 5px 0 rgb(239 239 239 / 50%);
            border-radius: 5px;
        }

        .chapterName {
            font-size: 15px;
            font-weight: normal;
            margin: 2px;
        }

        .chapterListInformation {
            margin-top: 20px;
            margin-left: 3px;
            margin-right: 5px;
        }

        .chapterListInformation li {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    </style>
</head>
<body>
<div>
    <div class="title">
        <div class="info">
            <div class="courseName title">
                <span></span>
            </div>
            <div class="teacherName">
            </div>
        </div>

        <div class="checkIn">
            <button type="button" class="layui-btn layui-btn-warm courseMaterialsButton">查看课程资料</button>
            <button type="button" class="layui-btn signIn">签到</button>
        </div>
    </div>
    <div class="context">
        <div class="chapterList">
            <span>章节列表</span>
            <ul class="chapterListInformation">
            </ul>
        </div>
        <div class="player">
            <video
                    id="my-player"
                    class="video-js"
                    controls
                    preload="auto"
                    width="800"
                    height="600"
            >
                <p class="vjs-no-js">
                    如果想使用video.js，请确保浏览器可以运行JavaScript，并且支持
                    <a href="https://videojs.com/html5-video-support/" target="_blank"
                    >HTML5 video</a>
                </p>
            </video>
        </div>
    </div>
</div>
</body>
<script src="/layui/layui.js"></script>
<script src="/js/core.util.js"></script>
<script src="/js/xm-select.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/video.js/7.10.2/video.min.js"></script>
<script>
    layui.use(['jquery', 'layer'], function () {
        const $ = layui.jquery
        const courseId = CoreUtil.getUrlParam("courseId");

        let options = {playbackRates: [0.5, 1, 1.5, 2]};
        let player = videojs('my-player', options, function onPlayerReady() {
            videojs.log('播放器准备好了!');

            // In this context, `this` is the player that was created by Video.js.
            this.play();

            this.on('ended', function () {
                videojs.log('播放结束!');
            });
        });

        const loadCourseInformation = function (courseId) {
            CoreUtil.sendAjax(`/study/course/${courseId}`, null, function (res) {
                $(".teacherName").text(res.teacherName)
                $(".courseName").children("span").text(res.name)
            }, "GET")
        }

        // 加载课程资料
        const loadCourseMaterials = function (courseId, success) {
            CoreUtil.sendAjax(`/study/courseMaterials/course/${courseId}`, null, success, "GET", false, function (res) {
                //更新课程无权限提示
                layer.msg("抱歉！您暂权限");
            });
        }

        const loadDataInformation = function (courseId) {
            let showMaterialList = function (res) {
                let map = res.map(material => {
                    let url = material.src
                    return `<li><h4 style="display: inline-block">${material.title}</h4><a style="margin-left: 40px;color: red" href=${url}>下载</a></li>`
                });
                layer.open({
                    area: ['500px', '300px'],
                    title: "课程资料列表",
                    content: `
                            <ul style="list-style-type:circle">
                                   ${map}
                            </ul>
                                `,
                });
            }
            loadCourseMaterials(courseId, showMaterialList)
        }

        const loadingChapterInformation = function (courseId) {
            CoreUtil.sendAjax(`/study/chapter/${courseId}`, null, function (res) {
                res.map(chapter => {
                    return creatChapterInfo(chapter)
                }).map(info => {
                    $(".chapterListInformation").append(info)
                })
                bindingPlayEvent()
            }, 'GET')
        }

        // 创建章节信息
        const creatChapterInfo = (data) => {
            return `
                 <li>
                    <div class="chapterName">
                        ${data.name}
                    </div>
                    <span hidden="hidden">${data.video}</span>
                    <button type="button" class="layui-btn layui-btn-xs play">播放</button>
                </li>
          `
        }


        // 绑定播放事件
        const bindingPlayEvent = () => {
            $(".play").on("click", function (event) {
                const target = event.target;
                const video = $(target).parent().children("span").text();
                player.src(video)
            })
        }

        // 签到按钮
        const loadCheckInformation = function (courseId) {
            let signInButton = (res) => {
                let map = res.map(material => {
                    return `
                        <li>
                            <h4 style="display: inline-block">${material.name}</h4>
                            <span hidden="hidden">${material.id}</span>
                            <button class="layui-btn signInBtn" style="margin-left: 40px;color: red">签到</button>
                        </li>`
                });
                layer.open({
                    area: ['500px', '300px'],
                    title: "签到任务列表",
                    content: `
                            <ul style="list-style-type:circle">
                                   ${map}
                            </ul>
                                `,
                });
                $(".signInBtn").on("click",function (event) {
                    let target = event.target;
                    let id = $(target).parent().children("span").text();
                    saveCheckInTask(id)
                })
            }
            loadCheckInInformation(courseId, signInButton);
        }

        // 加载课程资料
        const loadCheckInInformation = function (courseId, success) {
            CoreUtil.sendAjax(`/study/checkInTask/checkInTask?courseId=${courseId}`, null, success, "GET", false, function (res) {
                //更新课程无权限提示
                layer.msg("抱歉！您暂权限");
            }, "GET");
        }

        const saveCheckInTask = function (checkInTaskId) {
            CoreUtil.sendAjax(`/study/studentCheckInLog`, JSON.stringify({
                checkInTaskId
            }), (res) => {
                layer.msg("签到成功！！")
            })
        }


        // 加载课程信息
        loadCourseInformation(courseId)


        // 加载课程章节信息
        loadingChapterInformation(courseId)

        // 绑定加载课程资料事件
        $(".courseMaterialsButton").click(() => {
            loadDataInformation(courseId)
        })

        // 加载签到信息
        $(".signIn").click(() => {
            loadCheckInformation(courseId)
        })


    })
</script>
</html>